import React from 'react';
import { TrophyIcon } from './icons/TrophyIcon.tsx';

export type NotificationType = 'success' | 'error' | 'warning' | 'info';

interface NotificationModalProps {
  isOpen: boolean;
  onClose: () => void;
  type: NotificationType;
  title: string;
  message: string;
  confirmText?: string;
  showCancel?: boolean;
  cancelText?: string;
  onConfirm?: () => void;
}

const NotificationModal: React.FC<NotificationModalProps> = ({
  isOpen,
  onClose,
  type,
  title,
  message,
  confirmText = '确定',
  showCancel = false,
  cancelText = '取消',
  onConfirm
}) => {
  if (!isOpen) {
    return null;
  }

  // 根据类型获取图标和颜色样式
  const getTypeStyles = () => {
    switch (type) {
      case 'success':
        return {
          icon: '✅',
          iconColor: 'text-green-400',
          bgColor: 'bg-green-500/10',
          borderColor: 'border-green-500/20'
        };
      case 'error':
        return {
          icon: '❌',
          iconColor: 'text-red-400',
          bgColor: 'bg-red-500/10',
          borderColor: 'border-red-500/20'
        };
      case 'warning':
        return {
          icon: '⚠️',
          iconColor: 'text-yellow-400',
          bgColor: 'bg-yellow-500/10',
          borderColor: 'border-yellow-500/20'
        };
      case 'info':
      default:
        return {
          icon: 'ℹ️',
          iconColor: 'text-blue-400',
          bgColor: 'bg-blue-500/10',
          borderColor: 'border-blue-500/20'
        };
    }
  };

  const styles = getTypeStyles();

  const handleConfirm = () => {
    if (onConfirm) {
      onConfirm();
    }
    onClose();
  };

  return (
    <div 
      className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 animate-fade-in-fast" 
      onClick={onClose}
    >
      <div 
        className="bg-slate-800 rounded-xl shadow-2xl w-full max-w-md m-4 border border-slate-700 transform animate-scale-in"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-8 text-center">
          <div className="flex justify-center mb-4">
            <div className={`w-16 h-16 rounded-full ${styles.bgColor} ${styles.borderColor} border-2 flex items-center justify-center`}>
              <span className="text-3xl">{styles.icon}</span>
            </div>
          </div>
          
          <h2 className="text-2xl font-bold text-white mb-2">{title}</h2>
          <p className="text-slate-400 mb-6 whitespace-pre-line">{message}</p>

          <div className="mt-8 space-y-3">
            {showCancel ? (
              <div className="flex gap-3">
                <button
                  type="button"
                  onClick={onClose}
                  className="flex-1 px-6 py-3 rounded-md text-slate-300 font-semibold bg-slate-700 hover:bg-slate-600 transition"
                >
                  {cancelText}
                </button>
                <button
                  type="button"
                  onClick={handleConfirm}
                  className="flex-1 px-6 py-3 rounded-md text-white font-semibold bg-blue-600 hover:bg-blue-700 transition"
                >
                  {confirmText}
                </button>
              </div>
            ) : (
              <button
                type="button"
                onClick={handleConfirm}
                className="w-full px-6 py-3 rounded-md text-white font-semibold bg-blue-600 hover:bg-blue-700 transition"
              >
                {confirmText}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default NotificationModal;
